<template>
    <div class="wrapper">

        <!-- header部分 -->
        <header>
            <p>新增送货地址</p>
        </header>

        <!-- 表单部分 -->
        <ul class="form-box">
            <li>
                <div class="title">
                    联系人：
                </div>
                <div class="content">
                    <input type="text" v-model="deliveryAddress.contactName" placeholder="联系人姓名">
                </div>
            </li>

            <li>
                <div class="title">
                    电话：
                </div>
                <div class="content">
                    <input type="tel" v-model="deliveryAddress.contactTel" placeholder="电话">
                </div>
            </li>
            <li>
                <div class="title">
                    收货地址：
                </div>
                <div class="content">
                    <input type="text" v-model="deliveryAddress.address" placeholder="收货地址">
                </div>
            </li>
        </ul>

        <div class="button-add">
            <button @click="addUserAddress">保存</button>
        </div>

        <!-- 底部菜单部分 -->
        <Footer></Footer>

    </div>
</template>

<script>
    import Footer from '../components/Footer.vue';

    export default {
        name: 'AddUserAddress',
        data() {
            return {
                businessId: this.$route.query.businessId,
                user: {},
                deliveryAddress: {
                    contactName: '',
                    contactTel: '',
                    address: ''
                },
                tempdeliveryAddress: {
                    contactName: '',
                    contactTel: '',
                    address: ''
                }
            }
        },
        created() {
            this.user = JSON.parse(this.$getSessionStorage('user'));
        },
        components: {
            Footer
        },
        methods: {
            async addUserAddress() {
                if (this.deliveryAddress.contactName == '') {
                    this.$alert_msg('联系人姓名不能为空！');
                    return;
                }
                if (this.deliveryAddress.contactTel == '') {
                    this.$alert_msg('联系人电话不能为空！');
                    return;
                }
                if (this.deliveryAddress.address == '') {
                    this.$alert_msg('联系人地址不能为空！');
                    return;
                }
                this.deliveryAddress.userId = this.user.userId;
                let url = "/user_address"
                let data = {
                    address: this.deliveryAddress.address,
                    name: this.deliveryAddress.contactName,
                    phone: this.deliveryAddress.contactTel,
                    userId: this.user.id
                }
                const res = await this.$ajax_(url, data, 'post')
                this.$alert_res(res)
                if (res.status === 200) {
                    this.deliveryAddress = Object.assign({}, this.tempdeliveryAddress);
                    this.$router.push({path: '/userAddress'});
                }
            }
        }
    }
</script>

<style scoped>
    /*************** 总容器 ***************/
    .wrapper {
        width: 100%;
        height: 100%;
    }

    /*************** header ***************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        display: flex;
        justify-content: space-around;
        align-items: center;
        color: #fff;
        font-size: 4.8vw;
        position: fixed;
        left: 0;
        top: 0;
        /*保证在最上层*/
        z-index: 1000;
    }

    /*************** （表单信息） ***************/
    .wrapper .form-box {
        width: 100%;
        margin-top: 12vw;
    }

    .wrapper .form-box li {
        box-sizing: border-box;
        padding: 4vw 3vw 0vw 3vw;
        display: flex;
    }

    .wrapper .form-box li .title {
        flex: 0 0 18vw;
        font-size: 3vw;
        font-weight: 700;
        color: #666;
    }

    .wrapper .form-box li .content {
        flex: 1;

        display: flex;
        align-items: center;
    }

    .wrapper .form-box li .content input {
        border: none;
        outline: none;
        width: 100%;
        height: 4vw;
        font-size: 3vw;
    }

    .wrapper .button-add {
        box-sizing: border-box;
        padding: 4vw 3vw 0vw 3vw;
    }

    .wrapper .button-add button {
        width: 100%;
        height: 10vw;
        font-size: 3.8vw;
        font-weight: 700;

        border: none;
        outline: none;
        border-radius: 4px;
        color: #fff;
        background-color: #38CA73;
    }

</style>
